<template>
  <div id="app" class="complain">
    <div class="search">
    <div class="selectOption">
          <el-button type="success" @click="usercomplain">用户被投诉管理</el-button>
          <el-button type="success" @click="addAdvertisers">群投诉管理</el-button>
    </div>
    </div>
    <!--用户投诉管理页面列表-->
    <div class="contain_two" v-show="user" style="min-width: 675px;">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>
              <div class="">
                <span>#</span>
              </div>
            </th>
            <th class=""><span>用户昵称</span></th>
            <th>
              <div class="">
                <span>投诉次数</span>
              </div>
            </th>
            <th class=""><span>操作</span></th>
          </tr>
        </thead>
        <tbody id="staff_info" class="">
          <tr class="contLi" v-for="(list,index) in tableData">
            <td>
              <div class=""><span class="">{{index+1}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.userNick}}</span></div>
            </td>
            <td @click="yonghuxq(index)">
              <div class="" style="color: rgb(79, 174, 196);cursor: pointer;"><span class="">{{list.comNumber}}</span></div>
            </td>
            <td class="">
              <el-button type="danger" @click="open2(index)" v-show="list.status == 0">封停</el-button>
            </td>
          </tr>
        </tbody>
      </table>

      <!--<div class="block pagination">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>-->
    </div>
    <!--群投诉管理页面列表-->
    <div class="contain_two" style="min-width: 675px;" v-show="grop">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>
              <div class="">
                <span>#</span>
              </div>
            </th>
            <th class=""><span>用户昵称</span></th>
            <th>
              <div class="">
                <span>投诉次数</span>
              </div>
            </th>
            <th class=""><span>操作</span></th>
          </tr>
        </thead>
        <tbody id="staff_info" class="">
          <tr class="contLi" v-for="(list,index) in tableData_1">
            <td>
              <div class=""><span class="">{{index+1}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.groupNick}}</span></div>
            </td>
            <td @click="gropdetail(index)">
              <div class="" style="color: rgb(79, 174, 196);cursor: pointer;"><span class="">{{list.comNum}}</span></div>
            </td>
            <td class="">
              <el-button type="danger" @click="dismiss(index)">解散</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
      <!--<div class="block pagination">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>-->
      <!--群投诉详情-->
    <div class="tankuang" id="red_detial" v-show="hbdetail">
      <div class="bomb" style="width: 735px;">
        <div class="bomb_header">
          <p>投诉人员</p>
          <span @click="closes"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
        </div>
        <div class="bomb_content" style="height: 452px;border-bottom: none;">
          <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th style="width: 100px;">
                            <div class="">
                              <span>序号</span>
                            </div>
                          </th>
                          <th class=""><span>操作人</span></th>
                          <th>
                            <div class="">
                              <span>操作时间</span>
                            </div>
                          </th>
                          <th class=""><span>投诉理由</span></th>
                        </tr>
                      </thead>
                      <tbody id="staff_info" class="">
                        <tr class="contLi" v-for="(list,index) in gropDetail">
                          <td>
                            <div class=""><span class="">{{index+1}}</span></div>
                          </td>
                          <td>
                            <div class=""><span class="">{{list.userNick}}</span></div>
                          </td>
                          <td>
                            <div class=""><span class="">{{list.createTime}}</span></div>
                          </td>
                          <td class="">
                             <div class=""><span class="">{{list.remakers}}</span></div>
                          </td>
                        </tr>
                      </tbody>
                </table>
        </div>
      </div>
    </div>

<!--用户投诉详情-->
    <div class="tankuang" id="red_detial" v-show="hbdetail_1">
      <div class="bomb" style="width: 735px;">
        <div class="bomb_header">
          <p>添加广告主</p>
          <span @click="closes"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
        </div>
        <div class="bomb_content" style="height: 452px;border-bottom: none;">
            <table class="table table-bordered">
                      <thead>
                        <tr style="width: 100px;">
                          <th>
                            <div class="">
                              <span>序号</span>
                            </div>
                          </th>
                          <th class=""><span>操作人</span></th>
                          <th>
                            <div class="">
                              <span>操作时间</span>
                            </div>
                          </th>
                          <th class=""><span>投诉理由</span></th>
                        </tr>
                      </thead>
                      <tbody id="staff_info" class="">
                        <tr class="contLi" v-for="(list,index) in userDetail">
                          <td>
                            <div class=""><span class="">{{index+1}}</span></div>
                          </td>
                          <td>
                            <div class=""><span class="">{{list.userNick}}</span></div>
                          </td>
                          <td>
                            <div class=""><span class="">{{list.createTime}}</span></div>
                          </td>
                          <td class="">
                             <div class=""><span class="">{{list.remakers}}</span></div>
                          </td>
                        </tr>
                      </tbody>
                </table>
        </div>
      </div>
    </div>
      
    </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
// 导入地址数据 
import addressData from '../../assets/js/addressData.js'
// 加载地址数据
function formatData(data) {
  return data
}
export default {
  name: 'complain',
  data() {
    return {    
      hbdetail:false,  
      hbdetail_1:false,
      advLink:'../../../static/img/icon_xinjian_picture@2x.png',
      advHomer:'',
      advTitle:'',
      total:1,
      currentPage: 1,
      value1: '',
      tableData: [],
      tableData_1:[],
      lists: [],
      list:{},
      user:true,
      grop:false,
      gropDetail:[],
      userDetail:[],
    }
  },
  created: function () {
    this.complain(1)
    this.user = true
    this.grop = false
  },
  methods: {
    usercomplain:function(){
    this.complain(1)
    this.user = true
    this.grop = false
    },
    cancels: function () {
    },
    closes:function(){
      this.hbdetail = false
      this.hbdetail_1 = false
    },
    // 群投诉详情
    gropdetail(index){
      this.hbdetail = true
      this.gropdetaillist({
        token:sessionStorage.token,
        pageSize: 10,
        pageNo: 1,
        groupId:this.tableData_1[index].groupId,
      }).then((data)=>{
        console.log(data)
        for (let i = 0; i < data.data.length; i++) {
          data.data[i].createTime = this.formatDate(data.data[i].createTime)
          data.data[i].userNick = data.data[i].userNick
          data.data[i].remakers = data.data[i].remakers
        }
        this.gropDetail = data.data
      })
    },
    // 获取群投诉管理页面数据
    addAdvertisers:function(){
      this.gropcomplain(1)
      this.user = false
      this.grop = true
    },
    jiesan(i){
      this.jiesanlist({
        groupId:this.tableData_1[i].groupId,
        token:sessionStorage.token,
        id:this.tableData_1[i].groupId,
        status:'1'
      }).then((data)=>{
        console.log(data)
        if(data.code == 200){

        }else{
          this.$message({
          message: '解散失败',
          type: 'warning'
        });
        }
      })
    },
    // 群投诉管理解散
    dismiss(index) {
        this.$confirm('此操作将永久解散该群, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.jiesan(index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      // 群投诉详情

    gropcomplain(i){
      let token = sessionStorage.token;
      this.gropcomplainlist({
        pageSize: 10,
        pageNo: i,
        token: token,
        complainType:false
      }).then((data) => {
        console.log(data);
        if (data.code === 200) {
          // this.total = data.data.count;
          for (let i = 0; i < data.data.length; i++) {
            data.data[i].groupNick = data.data[i].groupNick;
            data.data[i].comNum = data.data[i].comNum;
            data.data[i].groupId = data.data[i].groupId;
            // data.data[i].comNum = data.data[i].comNum;
          }
          this.tableData_1 = data.data;
        } else {
           this.$message({
          message: 'error',
          type: 'warning'
        });
        }
      }).catch(msg => console.log(msg));
    },
    // 获取用户被投诉管理页面数据
    complain(i) {
      this.$store.commit('showLoading');
      let token = sessionStorage.token;
      this.complainlist({
        pageSize: 10,
        pageNo: i,
        token: token,
        complainType:true
      }).then((data) => {
        this.$store.commit('hiddenLoading');
        console.log(data);
        if (data.code === 200) {
          // this.total = data.data.count;
          for (let i = 0; i < data.data.length; i++) {
            data.data[i].userNick = data.data[i].userNick;
            data.data[i].comNumber = data.data[i].comNumber;
            data.data[i].status = data.data[i].status
            data.data[i].userId = data.data[i].userId
            data.data[i].userPhone = data.data[i].userPhone
          }
          this.tableData = data.data;
        } else {
           this.$message({
          message: 'error',
          type: 'warning'
        });
      }
      }).catch(msg => console.log(msg));
    },
    // 用户投诉详情
    yonghuxq(index){
      this.hbdetail_1 = true
      this.gropdetaillist({
        token:sessionStorage.token,
        pageSize: 10,
        pageNo: 1,
        groupId:this.tableData[index].userId,
      }).then((data)=>{
        console.log(data)
        for (let i = 0; i < data.data.length; i++) {
          data.data[i].createTime = this.formatDate(data.data[i].createTime)
          data.data[i].userNick = data.data[i].userNick
          data.data[i].remakers = data.data[i].remakers
        }
        this.userDetail = data.data
      })
    },
    // 用户投诉页面封停
    open2(index) {
      console.log(index)
      console.log(this.tableData[index].id)
        this.stop({
          token:sessionStorage.token,
          id:this.tableData[index].userId,
          account:this.tableData[index].userPhone,
          status:1,
        }).then((data)=>{
          console.log(data)
          if (data.code === 200) {
            this.tableData[index].status = 1
            // this.complain(1)
        } else {
            this.$message({
          message: '封停失败',
          type: 'warning'
        });
        }
        })
      },
    
    
    // 格式化日期
    formatDate(date){
      var y,m,d,h,i,s
      var t = new Date(parseInt(date))
      y = t.getFullYear()
      m = t.getMonth() + 1
      d = t.getDate()
      h = t.getHours()
      i = t.getMinutes()
      s = t.getSeconds()
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' '
            + (h < 10 ? '0' + h : h) + ':'+ (i < 10 ? '0' + i : i) + ':'+ (s < 10 ? '0' + s : s) 
    },
    // 请求格式化日期
    UnFormatDate(date) {
      var y,m,d,h,i
      var t = new  Date(date)
        y = t.getFullYear()
        m = t.getMonth() + 1
        d = t.getDate()
        h = t.getHours()
        i = t.getMinutes()
 return y + '/' + (m < 10 ? '0' + m : m) + '/' + (d < 10 ? '0' + d : d) + ' '
                + (h < 10 ? '0' + h : h) + ':'+ (i < 10 ? '0' + i : i) 

      },
    // 分页跳转
    handleCurrentChange(val) {
        this.currentPage = val;
        this.complain(val);
    },
    
...mapActions(['complainlist','stop','gropcomplainlist','jiesanlist','gropdetaillist'])

  }
}

</script>
<style scoped>
.el-button--success{
  width: 96px;
  margin-top: 2px;
}
  
  .add_reward {
    background: rgb(82, 186, 130);
    border-radius: 5px;
    width: 115px;
    height: 36px;
    border: none;
    margin-left: 45px;
    color: #fff;
  }
  
  th,
  td {
    text-align: center;
  }
  
  .contain_two {
    margin-top: 15px;
  }
  
 
  .egRatio {
    width: 50%;
    top: 0;
    left: 201px;
    position: absolute;
    color: #a5a3a3;
  }
  h4 {
    border-bottom: 1px solid rgb(229, 229, 229);
    margin-bottom: 12px;
    margin-top: 10px;
    font-size: 2.2rem;
    font-weight: 300;
    text-align: left;
    line-height: 34px;
    padding-bottom: 10px;
  }
  
  .needmoney input {
    width: 50%;
  }
  
  .needmoney input[type=text] {
    width: 57%;
  }
  
  .browseunit input[type=text] {
    width: 31%;
  }
  .clickunit input[type=text] {
    width: 31%;
  }
  
  .dingxiang input[type=text] {
    width: 57%;
  }
  
  .interest li {
    width: 20%;
    float: left;
    padding: 10px 0;
  }
  .moneydafault p{
    float: left;
    margin: 0 10px;
    width:30%;
  }
  .moneydafault p input[type=text]{
    width:60%;
  }
  .fl{
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 15px;
  }
  .fr{
    width: 50%;
    float: right;
    text-align: left;
  }
  .bomb_content p{
    font-size: 16px;
    margin:10px 0;
  }
  .bomb_content table{
    width: 100%;
    margin-top: 20px;
  }
  .bomb_content p:nth-of-type(1){
    width: 100%;
    text-align: left;
    padding-left: 15px;
    margin: 3px 0;
    padding-top: 4px;
  }
  #ad_queue{
    margin:10px 0;
  }
  #ad_queue span{
    font-size: 16px;
  }
  .half p{
    padding-left:0;
  }
  .half p input{
    width:65%!important;
  }
  .el-date-editor{
    width: 297px!important;
    margin-left:8px!important;
}
.reward li input[type=text]{
width:58%;
margin-left: 6px;
}
.reward li span{
  margin-left:5px;
}
.reward li{
  text-align: left;
  float:left;
  width:25%;
}
.tankuang {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow: auto;
    z-index: 1500;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
  
  
.table > tbody > tr{
    padding:0;
}
.complain{
   width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
}
</style>